<!DOCTYPE html>
<html lang="en">
<head>
    <title>视频上传</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="/webjars/miniui/boot.js" type="text/javascript"></script>
    <link href="/static/css/resource.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/default.css" rel="stylesheet" type="text/css"/>
    <script src="/static/js/common/common.js" type="text/javascript"></script>
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/static/css/webuploader.css">
    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/js/webuploader.js"></script>
    <style>
        #upload-container, #upload-list{width: 500px; margin:left; }
        #upload-container{cursor: pointer; border-radius: 15px; background: #EEEFFF; height: 200px;}
        #upload-list{height: 10px; border: 1px solid #EEE; border-radius: 5px; margin-top: 10px; margin-bottom: 10px;padding: 10px 10px; width:480px;}
        #upload-container > span{widows:100%; text-align: center; color: gray; display: block; padding-top: 15%;}
        .upload-item{margin-top: 5px; padding-bottom: 5px; border-bottom: 1px dashed gray;}
        .percentage{height: 5px; background: green;}
    </style>
</head>

<!--引入JS-->
<body>
<div>
    <textarea id="desc" name="desc" style="height: 10px; border: 1px solid #EEE; border-radius: 5px;padding: 10px 10px; width:480px;" placeholder="请描述文件信息与作用"></textarea>
</div>
<div id="upload-container">
    <span>点击或将文件拖拽至此上传</span>
</div>
<div id="upload-list"></div>
<button id="picker" style="display: none;">点击上传文件</button>
<div class="mini-fit">
    <div id="data1" class="mini-datagrid" style="width: 100%; height: 100%;" ajaxType="get" multiSelect="false" pageSize="50" virtualScroll="false" showLoading="true" idField="id" url="/azbj/spgl/getAllVideos?flag=-1">
        <div property="columns">
            <div type="indexcolumn" width="10" headerAlign="center">序号</div>
            <div name="name" field="name" align="center" width="20" headerAlign="center" allowSort="false">文件名</div>
            <div name="type" field="type" align="center" width="20" headerAlign="center" allowSort="false">文件类型</div>
            <div name="descriton" field="descriton" align="center" width="35" headerAlign="center" allowSort="false">文件简介</div>
            <div name="localPath" field="localPath" align="center" width="35" headerAlign="center" allowSort="false">文件本地地址</div>
            <div name="ftpPath" field="ftpPath" align="center" width="35" headerAlign="center" allowSort="false">文件司法部地址</div>
            <div name="createProvinceCode" field="createProvinceCode" align="center" width="15" headerAlign="center" allowSort="false">上传省份</div>
            <div name="updateProvinceCode" field="updateProvinceCode" align="center" width="15" renderer="biaoshi" headerAlign="center">修改省份</div>
            <div name="createTime" field="createTime" align="center" width="20" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss" >创建时间</div>
            <div name="updateTime" field="updateTime" align="center" width="20" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss" >修改时间</div>
            <div name="flag" field="flag" align="center" width="20" headerAlign="center" allowSort="false" renderer="setStatus">状态</div>
            <div name="action" headerAlign="center" align="center" width="35" renderer="onActionRenderer" cellStyle="padding:0;" allowSort="false" multiSelect="false">操作
            </div>
        </div>
    </div>
</div>
</body>

<script>
    mini.parse();

    var grid = mini.get("data1");
    grid.load();
    function setStatus(e) {
        var Statedata = [{id: 0, text: '上架'}, {id: 1, text: '下架'}];
        for (var i = 0, l = Statedata.length; i < l; i++) {
            var g = Statedata[i];
            if (g.id == e.value){
                return g.text;
            }

        }
    }
    $('#upload-container').click(function(event) {
        $("#picker").find('input').click();
    });
    var uploader = WebUploader.create({
        auto: true,// 选完文件后，是否自动上传。
        swf: 'Uploader.swf',// swf文件路径
        server: '/azbj/spgl/upload',// 文件接收服务端。
        dnd: '#upload-container',
        pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        //multiple: true, // 选择多个
        formData: {"desc": ""},
        //chunked: true,// 开启分片上传。
        threads: 20, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        fileSizeLimit: 1024*1024*1024*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        fileSingleSizeLimit: 1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileVal:'upload' // [默认值：'file'] 设置文件上传域的name。
    });

    uploader.on("beforeFileQueued", function(file,data) {
        var desc=$('#desc').val();
        if(!desc || desc.length == 0 ){
            mini.alert("请为文件添加描述");
            return false;
        }
    });

    uploader.on("uploadBeforeSend",function (obj,data,headers){
        $.ajax({
            url: "/azbj/spgl/deleteVideo",
            type: "post",
            data: JSON.stringify({"name":data.name}),
            dataType: "json",
            contentType : 'application/json;charset=utf-8',
            success: function (data) {

            }
        });
        data.desc = $('#desc').val();
        //参数n为休眠时间，单位为毫秒:
        function sleep(n) {
            var start = new Date().getTime();
            while (true) {
                if (new Date().getTime() - start > n) {
                    break;
                }
            }
        }
        sleep(2000);
    });
    uploader.on('fileQueued', function(file) {
        var html =
            '<div class="upload-item"><span>文件名：'+file.name+'</span>'+'<div class="percentage '+file.id+'" style="width: 0%;"></div></div>';
        $('#upload-list').append(html);

    });

    uploader.on('uploadProgress', function(file, percentage) {
        var width = $('.upload-item').width();
        $('.'+file.id).width(width*percentage);
    });

    uploader.on('uploadSuccess', function(file, response) {
        grid.load();
        $('#upload-list').remove();
        $('#desc').val('');
        mini.alert(file.name+ " 传输成功");
    });

    uploader.on('uploadError', function(file) {
        mini.alert(file.name+" 传输失败");
    });

    function onActionRenderer(e){
        var record = e.record;
        var name = record.name;
        var flag = record.flag;
        var s = "";
        if(flag==0){
            s +='<a class="mini-button mini-button-danger" href="javascript:downShelves(\'' + name + '\')">&nbsp;&nbsp;下架&nbsp;&nbsp;</a>&nbsp ';
        }else{
            s +='<a class="mini-button mini-button-info" href="javascript:uploadShelves(\'' + name + '\')">&nbsp;&nbsp;上架&nbsp;&nbsp;</a>&nbsp ';
        }
        return s;
    }
    function uploadShelves(name){
        $.ajax({
            url: "/azbj/spgl/updateVideo",
            type: "post",
            data: JSON.stringify({"name":name,"status":"0"}),
            dataType: "json",
            contentType : 'application/json;charset=utf-8',
            success: function (data) {
                if(data.code==1){
                    mini.alert(name+"上架成功");
                    grid.load();
                }else{
                    mini.alert(name+"上架失败");
                    grid.load();
                }
            }
        });


    }

    function downShelves(name){
        $.ajax({
            url: "/azbj/spgl/updateVideo",
            type: "post",
            data: JSON.stringify({"name":name,"status":"1"}),
            dataType: "json",
            contentType : 'application/json;charset=utf-8',
            success: function (data) {
                if(data.code==1){
                    mini.alert(name+"下架成功");
                    grid.load();
                }else{
                    mini.alert(name+"下架失败");
                    grid.load();
                }
            }
        });
    }
</script>
</html>